<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-date-picker
          v-model="month"
          type="month"
          @change="getMonthData"
          placeholder="选择月">
        </el-date-picker>
      </el-col>
    </el-row>
    <!-- 每日任务量 -->
    <!-- 分割线 -->
    <md-divider class="md-inset"></md-divider>
    <!-- 每日任务量 -->
    <GChart
      :settings="{packages: ['line']}"
      :data="monthData"
      :options="chartOptions"
      :createChart="(el, google) => new google.charts.Line(el)"
      type="LineChart"
      @ready="onChartReady"
    />
    <!-- 提示框-->
    <Message ref="mes"></Message>
  </div>
</template>

<script>
  import { GChart } from 'vue-google-charts'
  import Message from '@/components/Message'
  import {getMonthTaskInfo} from '@/util/service/MonthService'
  let now = new Date()
  export default {
    name: 'Month',
    components: {
      GChart, Message
    },
    data: () => ({
      month: new Date(now.getFullYear(), now.getMonth(), 1),
      chartsLib: null, // 这个chartlib可能来自google或者echart等
      chartRows: [],
      chartHeader: ['天', '任务量']
    }),
    computed: {
      chartOptions () {
        if (!this.chartsLib) return null
        return this.chartsLib.charts.Line.convertOptions({
          chart: {
            title: '月信息'
            // subtitle: '任务量' + this.chartData === undefined || null ? 'xxx' : this.chartData[1][0] + '到' + this.chartData[this.chartData.length - 1] === undefined ? 'xxx' : this.chartData[this.chartData.length - 1]
          },
          colors: ['#1b9e77']
        })
      },
      monthData () {
        return [this.chartHeader, ...this.chartRows]
      }
    },
    methods: {
      onChartReady (chart, google) {
        this.chartsLib = google
      },
      getMonthData () {
        getMonthTaskInfo(this.month).then((response) => {
          this.chartRows = response
        })
      }
    },
    mounted () {
      this.getMonthData()
    }
  }
</script>

<style lang="less" scoped>
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
</style>
